<template>
    <div class="map">
      <div class="maxWidth">
        <div class="mapOut">
          <div id="container"></div>
          <div @click="lookInfo" class="infoBtn" v-show="infoListShow">
            &nbsp;&nbsp;&nbsp;&nbsp;巡检信息
          </div>
          <div @click="fullScreen" class="fullScreen">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全屏[X]
          </div>
          <div v-show="!infoListShow" class="infoList">
            <div @click="closeInfoList" class="close">
              <span>巡检信息</span>
              <i class="el-icon-close"></i>
            </div>
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
        </div>
      </div>
      <div class="gisMapRight">
        <div class="btnList">
            <el-button >故障录入</el-button>
        </div>
        <div class="bottomList" id="">
          <ul class="listHeader">
            <li class="name">处理人</li>
            <li class="number">事情详情</li>
            <li class="time">故障时间</li>
            <li class="pos">处理结果</li>
          </ul>
          <div class="myline"></div>
          <ul v-for="item in xunjianList" :key="item" class="listCon">
            <li class="name">刘波儿</li>
            <li class="number">一号管线压力异常</li>
            <li class="time">2023.03.21 10:21</li>
            <li class="pos">西安市雁塔区丈八六路</li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import pianqu from '@/assets/json/pianqu.json'
  
  export default {
    name: "FaultAnalysis",
    data() {
      return {
        fillLayer: null,
        infoListShow: true,
        zoom: 0,
        mapDom: {},
        map: {},
        startWidth: 0,
        WidthMin: 0,
        WidthMax: 0,
        WidthEms:49.5,
        timer: null,
        isFull: false,
        xunjianList: [1, 2, 3, 4, 5],
        data: [
          {
            label: "一级 1",
            children: [
              {
                label: "二级 1-1",
                children: [
                  {
                    label: "三级 1-1-1",
                  },
                ],
              },
              {
                label: "一级 2",
                children: [
                  {
                    label: "二级 2-1",
                    children: [
                      {
                        label: "三级 2-1-1",
                      },
                    ],
                  },
                  {
                    label: "二级 2-2",
                    children: [
                      {
                        label: "三级 2-2-1",
                      },
                    ],
                  },
                ],
              },
              {
                label: "一级 3",
                children: [
                  {
                    label: "二级 3-1",
                    children: [
                      {
                        label: "三级 3-1-1",
                      },
                    ],
                  },
                  {
                    label: "二级 3-2",
                    children: [
                      {
                        label: "三级 3-2-1",
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },
    methods: {
      // 全屏事件
      fullScreen() {
        let menu = document.querySelector(".map");
        let mapOut = document.querySelector(".mapOut");
        this.WidthMax = menu.offsetWidth;
        console.dir("最大", mapOut);
        if (!this.isFull) {
          this.mapDom = document.getElementById("container");
          this.startWidth = this.mapDom.offsetWidth;
          //清除定时器
          clearInterval(this.timer);
          // 不是全屏变全屏
          this.timer = setInterval(() => {
            this.addOrEditWid(mapOut, this.startWidth, this.WidthMax, 20);
            // console.log(1);
          }, 30);
          this.isFull = !this.isFull;
        } else {
          //清除定时器
          clearInterval(this.timer);
          // 全屏变半屏
          this.timer = setInterval(() => {
            this.addOrEditWid(mapOut, this.startWidth, this.WidthMax, -20);
            // console.log(1);
          }, 30);
          this.isFull = !this.isFull;
        }
      },
      // addOrEditWid(dom, iWidthMin, iWidthMax, iSpeed) {
      //   dom.style.display = "block";
      //   if (iSpeed > 0) {
      //     // 变宽
      //     if (dom.offsetWidth < iWidthMax) {
      //       dom.style.width = dom.offsetWidth + iSpeed + "px";
      //     }
      //   } else {
      //     if (dom.offsetWidth > iWidthMin) {
      //       dom.style.width = dom.offsetWidth + iSpeed + "px";
      //     }
      //   }
      // },
      addOrEditWid(dom, iWidthMin, iWidthMax, iSpeed) {
      dom.style.display = "block";
      if (iSpeed > 0) {
        // 变宽
        if (this.WidthEms < 100) {
          //dom.style.width = dom.offsetWidth + iSpeed + "px";

           this.WidthEms = this.WidthEms + 0.5;
           dom.style.width = this.WidthEms + "%" ;
           
        }
      } else {
        if (this.WidthEms > 49.5) {
          //dom.style.width = dom.offsetWidth + iSpeed + "px";
          this.WidthEms = this.WidthEms - 0.5;
          dom.style.width = this.WidthEms + "%" ;

        }
      }
    },
      // 查看巡检信息事件
      lookInfo() {
        this.infoListShow = false;
      },
      closeInfoList() {
        this.infoListShow = true;
      },
      // 图层相关
      addFillLayer() {
        fetch(
          "yang/area/coordinate"
        )
          .then((res) => {
            return res.json();
          })
          .then((testFillData) => {
            if (!this.fillLayer) {
              this.fillLayer = new BMapGL.FillLayer({
                crs: "GCJ02",
                enablePicked: true,
                autoSelect: true,
                pickWidth: 30,
                pickHeight: 30,
                selectedColor: "green", // 悬浮选中项颜色
                border: true,
                style: {
                  fillColor: [
                    "case",
                    ["boolean", ["feature-state", "picked"], false],
                    "red",
                    [
                      "match",
                      ["get", "name"],
                      "海淀区",
                      "#ce4848",
                      "朝阳区",
                      "blue",
                      "通州区",
                      "blue",
                      "丰台区",
                      "#6704ff",
                      "房山区",
                      "#6704ff",
                      "orange",
                    ],
                  ],
                  fillOpacity: 0.3,
                  strokeWeight: 1,
                  strokeColor: "blue",
                },
              });
              this.fillLayer.addEventListener("click", function (e) {
                if (e.value.dataIndex !== -1 && e.value.dataItem) {
                  console.log("click", e.value.dataItem);
                  // 使用样式配置，实现单选或多选效果
                  // this.updateState(e.value.dataIndex, { picked: true }, true);
                }
              });
            }
            console.log(testFillData)
            this.map.addNormalLayer(this.fillLayer);
            this.fillLayer.setData(testFillData.data);
          });
      },
      //  巡检点击事件
      handleNodeClick(data) {
        console.log(data);
      },
    },
    mounted() {
      (this.map = new BMapGL.Map("container")), console.log(this.map);
      var point = new BMapGL.Point(114.673864,35.183726);
    // 114.673864,35.183726
      this.map.centerAndZoom(point, 13);
      this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      this.addFillLayer();
    },
  };
  </script>
  
  <style lang="less" scoped>
  .map {
    height: 100%;
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
  
    .maxWidth {
      width: 100%;
      height: 100%;
      .mapOut {
        position: relative;
        width: 49.5%;
        height: 100%;
        z-index: 999;
        #container {
          border-radius: 30px;
          height: 100%;
          width: 100%;
        }
        .infoBtn {
          position: absolute;
          width: 100px;
          height: 45px;
          background-color: rgba(16, 3, 3, 0.5);
          top: 0;
          left: 0;
          cursor: pointer;
          z-index: 99;
          font-size: 16px;
          color: white;
          line-height: 45px;
        }
        .fullScreen {
          position: absolute;
          width: 100px;
          height: 45px;
          background-color: rgba(16, 3, 3, 0.5);
          top: 0;
          right: 0;
          cursor: pointer;
          z-index: 99;
          font-size: 16px;
          color: white;
          line-height: 45px;
          border-top-right-radius: 30px;
        }
        .infoList {
          width: 280px;
          height: 100%;
          background-color: rgba(16, 3, 3, 0.5);
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 30px;
          z-index: 99;
          .close {
            margin-left: 15px;
            margin-top: 10px;
            cursor: pointer;
            ::v-deep [class*=" el-icon-"],
            [class^="el-icon-"] {
              color: white;
            }
            span {
              font-size: 24px;
              color: white;
            }
            i {
              margin-left: 135px;
            }
          }
          .el-tree {
            background-color: transparent;
            color: white;
          }
          ::v-deep .el-tree-node__content:hover {
            background-color: transparent;
            color: white;
          }
          ::v-deep .el-tree-node:focus > .el-tree-node__content {
            background-color: transparent;
            color: white;
          }
          ::v-deep .el-tree-node__content:hover {
            background-color: transparent;
            color: white;
          }
        }
      }
    }
  
    .gisMapRight {
      position: absolute;
      top: 0;
      right: 0;
      width: 49.5%;
      height: 100%;
      border-radius: 30px;
      background-color: #002127;
      .btnList{
        margin-left: 30px;
        margin-top: 20px;
        .el-button{
            border-color: #00E7E7;
        }
      }
      .bottomList {
        width: 100%;
        height: calc(100% - 275px);
        margin-top: 20px;
        border-radius: 30px;
        color: white;
        .listHeader {
          box-sizing: border-box;
          background-color: #00484D;
          padding-left: 20px;
          padding-right: 20px;
          height: 60px;
          line-height: 60px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          text-align: center;
          font-size: 14px;
          margin: 0;
          li {
            list-style: none;
          }
          .name {
            width: 60px;
          }
          .number {
            width: 150px;
          }
          .pos {
            width: 200px;
          }
          .time {
            width: 150px;
          }
        }
        .myline{
          width: 98%;
          margin: auto;
          height: 1px;
          background-color: #0c323a;
        }
        .listCon {
          box-sizing: border-box;
          padding-left: 20px;
          padding-right: 20px;
          width: 100%;
          height: 32px;
          display: flex;
          text-align: center;
          justify-content: space-between;
          font-size: 14px;
          li {
            list-style: none;
          }
          .name {
            width: 60px;
          }
          .number {
            width: 150px;
          }
          .pos {
            width: 200px;
          }
          .time {
            width: 150px;
          }
        }
      }
    }
  }
  </style>